<%--
  Created by IntelliJ IDEA.
  User: Tian
  Date: 2024/3/14
  Time: 18:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/echarts.js"></script>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <div id="main" style="width: 600px;height:400px;">

    </div>
</div>

</body>
<script>
    let app=new Vue({
        el:"#app",
        created(){
            this.initEcharts();
        },
        data:{

            msg:[],
        },
        methods:{
            initEcharts(){
                axios.get("/echart/demo01").then(result=>{
                    console.log(result)
                    for (let i=0;i<result.data.length;i++){
                        let emp={
                                value:0,
                                name:'',
                        }
                        emp.name=result.data[i].dname
                        emp.value=result.data[i].count
                        this.msg.push(emp)
                    }


                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption( {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '部门人数',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: 40,
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data:this.msg
                            }
                        ]
                    })
                })
            }
        }
    })
</script>
</html>